<template>
    <div class="detailContainer">
        <div class="left">
            <div class="main">
                <el-image :src="book.coverImg" class="cover"></el-image>
                <div class="content">
                    <div class="title">{{ book.title }}</div>
                    <div class="info">
                        <div class="price">
                            价格：<span>￥{{ book.price }}</span>
                        </div>
                        <div class="sold">
                            <span>{{ book.soldNum }}</span
                            >销量
                        </div>
                    </div>
                    <div class="btnGroup">
                        <el-button type="danger" plain @click="immediateBuy">立即购买</el-button>
                        <el-button type="danger" @click="addToCart">加入购物车</el-button>
                    </div>
                </div>
            </div>
            <div class="brief">
                <div class="line">
                    <div class="line1">图书名称：{{ book.title }}</div>
                    <div class="line1">作者：{{ book.author }}</div>
                    <div class="line1">出版日期：{{ book.pubDate }}</div>
                    <div class="line1">出版社：{{ book.publisher }}</div>
                    <div class="line2">简介：{{ book.summary }}</div>
                </div>
            </div>
            <div class="detail">
                <div class="title">商品详情:</div>
                <div class="data">
                    产品参数:
                    <div class="detail2">产品名称：{{ book.title }}</div>
                    <div class="detail2">作者：{{ book.author }}</div>
                    <div class="detail2">定价：{{ book.price }}元</div>
                    <div class="detail2">出版社名称：{{ book.publisher }}</div>
                    <div class="detail2">出版日期：{{ book.pubDate }}</div>
                </div>
            </div>
        </div>
        <div class="right">
            <SizePage></SizePage>
        </div>
    </div>
</template>

<script>
import service from "@/utils/request";
import SizePage from "@/components/Home/SizePage.vue";
import store from "@/store";
import { ElMessage } from "element-plus";

export default {
    name: "DetailView",
    data() {
        return {
            book: {},
            list: [],
        };
    },
    methods: {
        // 立即购买
        immediateBuy() {
            service({
                method: "post",
                url: "/order/add",
                headers: {
                    token: store.state.token,
                },
                data: {
                    ...this.book,
                    userID: store.state.userInfo.userID,
                    telephone: store.state.userInfo.telephone,
                    orderState: 2,
                    payState: 0,
                    orderAddress: "",
                    name: store.state.userInfo.username,
                },
            }).then((res) => {
                // console.log(res.data);
                this.$router.replace(`/settle`);
            });
        },
        // 添加到购物车
        addToCart() {
            if (store.state.isLogin) {
                service({
                    method: "post",
                    url: "/order/add",
                    headers: {
                        token: store.state.token,
                    },
                    data: {
                        ...this.book,
                        userID: store.state.userInfo.userID,
                        telephone: store.state.userInfo.telephone,
                        orderState: 1,
                        payState: 0,
                        orderAddress: "",
                        name: store.state.userInfo.username,
                    },
                }).then((res) => {
                    // console.log(res.data);
                    ElMessage({
                        type: "success",
                        message: "添加到购物车成功",
                    });
                });
            } else {
                ElMessage({
                    type: "error",
                    message: "请先登录",
                });
                this.$router.replace({ name: "login" });
            }
        },
    },
    //接收传参
    computed: {
        categoryObj() {
            return this.$route.params;
        },
    },
    //获取数据
    mounted() {
        // console.log(this.$route.path.split("/")[2]);
        // console.log(store.state.activeIndex);
        let bookID =
            store.state.activeIndex.split("/")[2] === undefined
                ? this.categoryObj.bookID
                : store.state.activeIndex.split("/")[2];
        service({
            url: `/book/selectById/${bookID}`,
            method: "get",
        }).then((res) => {
            // console.log("respon", res.data);
            this.book = res.data;
        });
    },
    components: { SizePage },
};
</script>

<style lang="scss" scoped>
.detailContainer {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: 0 auto;

    .left {
        flex: 3;
        display: flex;
        flex-direction: column;

        .main {
            border: 1px solid var(--el-border-color-light);
            border-right: none;
            display: flex;
            flex-direction: row;
            padding: 20px;

            .cover {
                flex: 1;
            }

            .content {
                flex: 5;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 20px;
                // width: 100%;
                height: 100%;

                .title {
                    flex: 2;
                    font-family: "宋体", sans-serif;
                    font-size: 1.4rem;
                    font-weight: bold;
                }

                .info {
                    flex: 2;
                    display: flex;
                    padding: 0.6rem;
                    justify-content: space-between;
                    background-color: #ffcc80;

                    .price {
                        align-self: center;
                        color: #e64a19;

                        span {
                            font-size: 1.8rem;
                            font-family: "阿里巴巴普惠体";
                        }
                    }

                    .sold {
                        display: flex;
                        flex-direction: column;
                        font-size: 0.8rem;
                        text-align: center;
                        color: #424242;

                        span {
                            font-size: 1rem;
                        }
                    }
                }

                .btnGroup {
                    flex: 2;
                    margin-top: 20px;
                }
            }
        }

        .brief {
            // border: 1px solid black;
            padding: 20px;
            line-height: 1.4rem;
            font-size: 0.8rem;
            color: var(--el-text-color-regular);
        }

        .detail {
            border: 1px solid var(--el-border-color-light);
            padding: 20px;
            color: var(--el-text-color-secondary);
            font-size: 0.8rem;

            .data {
                text-indent: 1rem;

                .detail2 {
                    text-indent: 2rem;
                }
            }
        }
    }

    .right {
        flex: 1;
        height: 100%;
        border: 1px solid var(--el-border-color-light);
    }
}
</style>
